<script lang="ts" setup>
import {ref, reactive, computed, inject, type Ref} from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { postUserRegister} from "@/apis/student";

import {type FormInstance, message} from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';
import {type FormState, regexRule, cerate_name} from "./setting";

const go:any = inject('go')

const formRef:Ref = ref<FormInstance>();
const formState = reactive<FormState>({
  username:'',
  password:'',
  repwd:'',
  phone:'',
  email:''
});
const onFinish = async (values: FormState) => {
  const {username, password, phone, email} = values
  const res:any = await postUserRegister({
    userName: username,
    userPassword: password,
    userPhone: phone,
    userEmail: email
  })
  // console.log(res);
  if(res && res.status == 200){ message.success("请求成功") }
  else { message.error("请求失败") }
};
const onFinishFailed = (errorInfo: any) => {
  message.error("账户或密码错误")
};
//自定义校验规则
const validateName = async (_rule: Rule, value: string) => {
  if (!value){
    return Promise.reject('请输入账户');
  }
  else if (!regexRule.act.test(value)){
    return Promise.reject('账户由3-16为字符组成，只包含数字与字母');
  }else {
    return Promise.resolve();
  }
};
const validatePass = async (_rule: Rule, value: string) => {
  if (!value){
    return Promise.reject('请输入密码');
  }
  else if (!regexRule.pwd.test(value)){
    return Promise.reject('密码由至少6个字符组成且至少包含一个数字、一个字母');
  }else {
    return Promise.resolve();
  }
};
const validatePass2 = async (_rule: Rule, value: string) => {
  if (!value){
    return Promise.reject('请再一次输入密码');
  }
  else if (value!==formState.password){
    return Promise.reject('两次密码不一致');
  }else {
    return Promise.resolve();
  }
};
const validatePhone = async (_rule: Rule, value: string) => {
  if(value && !regexRule.pho.test(value)){
    return Promise.reject('电话格式错误');
  } else {
    return Promise.resolve();
  }
}
const validateEmail = async (_rule: Rule, value: string) => {
  if(value && !regexRule.eml.test(value)){
    return Promise.reject('邮箱格式错误');
  } else {
    return Promise.resolve();
  }
}
const rules: Record<string, Rule[]> = {
  username: [{ required: true, validator: validateName, trigger: 'change' }],
  password: [{ required: true, validator: validatePass, trigger: 'change' }],
  repwd: [{ required: true, validator: validatePass2, trigger: 'change' }],
  phone: [{ validator: validatePhone, trigger: 'change' }],
  email: [{ validator: validateEmail, trigger: 'change' }],
};
</script>

<template>
  <a-flex justify="end">
    <a-button type="link" @click="go('/login')">返回</a-button>
  </a-flex>
  <div class="form-body">
    <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item
          label="账号"
          name="username"
          has-feedback
      >
        <a-input v-model:value="formState.username">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
          label="密码"
          name="password"
          has-feedback
      >
        <a-input-password v-model:value="formState.password">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item
          label="重复"
          name="repwd"
          has-feedback
      >
        <a-input-password v-model:value="formState.repwd">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item
          label="电话"
          name="phone"
          has-feedback
      >
        <a-input v-model:value="formState.phone">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
          label="邮箱"
          name="email"
          has-feedback
      >
        <a-input v-model:value="formState.email">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item>
        <a-button type="primary" html-type="submit" class="login-form-button">
          注 册
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style lang="scss" scoped>
.login-form {
  max-width: 300px;
  margin: 0 auto;
}
.login-form-button {
  width: 100%;
}
.form-body{
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  align-items: center;
}
</style>
